<script setup>
import { reactive, onBeforeMount, ref } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Mousewheel, Keyboard, EffectCreative } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'

import ImageView from '@/components/ImageView.vue'
import VideoView from '@/components/VideoView.vue'
import AudioView from '@/components/AudioView.vue'

import requset from '@/utils/http/index.js'
import { ImageViewModel, VideoViewModel } from '@/utils/ValueFunction.js'

const state = reactive({
  data: [],
  activeIndex: 0, // 当前下标
  page: {
    current: 1,
    size: 10,
    noMore: false
  }
})
const swiperRef = ref(null)

onBeforeMount(() => {
  loadData()
})
/**
 * 切换页面
 * @param {Swiper} swiper 滚动视图
 */
function handleSlideChangeTransitionEnd(swiper) {
  if (!swiper) {
    console.log('////')
    return
  }
  if (swiper?.slides?.length - swiper?.activeIndex == 1) {
    // 最后一个slider
    if (!state.page.noMore) {
      state.page.current += 1
      loadData()
    }
  }
}
/**
 * 加载数据
 */
async function loadData() {
  try {
    const res = await requset({
      method: 'post',
      url: '/scapi/cache/Handle/materialList',
      data: {
        rules: '05f101bb75328d7811b8af4275d46885',
        page: state.page.current
      },
      config: {
        baseURL: '/cretechsh',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      }
    })
    if (res && res.data && Array.isArray(res.data)) {
      if (res.data.length === 0) {
        state.page.noMore = true // 没有更多数据了
        return
      }
      for (const item of res.data) {
        if (item?.type == 'image' || item?.type == 'video') {
          const images = []
          if (item?.resource && Array.isArray(item?.resource)) {
            for (const r of item.resource) {
              if (item?.type == 'image') {
                const model = new ImageViewModel({ id: r?.id, url: r.attach_url })
                images.push(model)
              } else if (item?.type == 'video') {
                const model = new VideoViewModel({ id: r?.id, url: r.attach_url })
                images.push(model)
              }
            }
          }
          item.data = images
        }
        state.data.push(item)
      }
    }
    console.log('state.data', state.data)
  } catch (error) {
    console.log(error)
  }
}

function handleActiveIndexChange(swiper) {
  console.log('handleActiveIndexChange: ', swiper)
  state.activeIndex = swiper?.activeIndex
}
function handleSlideChange(swiper) {
  console.log('handleSlideChange: ', swiper)
}
</script>

<template>
  <swiper
    ref="swiperRef"
    direction="vertical"
    :spaceBetween="30"
    :centeredSlides="true"
    :mousewheel="{
      enabled: true,
      forceToAxis: true
    }"
    :keyboard="{
      enabled: true
    }"
    :modules="[Mousewheel, Keyboard, EffectCreative]"
    @slideChangeTransitionEnd="handleSlideChangeTransitionEnd"
    @activeIndexChange="handleActiveIndexChange"
    @slideChange="handleSlideChange"
    class="mySwiper"
  >
    <swiper-slide v-for="(item, index) in state.data" :key="index" :lazy="true">
      <ImageView v-if="item.type == 'image'" :list="item.data"></ImageView>
      <VideoView
        v-else-if="item.type == 'video'"
        :data="item?.data?.[0]"
        :activeIndex="state.activeIndex"
        :index="index"
      ></VideoView>
      <!-- <div v-else-if="item.type == 'video'" :id="`video_${index}`">视频</div> -->

      <AudioView v-else-if="item.type == 'audio'"></AudioView>

      <div v-else>其他</div>
    </swiper-slide>
  </swiper>
</template>

<style scoped>
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}

.swiper-slide r {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item {
  width: 100%;
  height: 100%;
}
</style>
